<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    水平居中方式：
    块级元素

    方案一：(分宽度定不定两种情况)
    定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
    不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

    方案二：使用定位属性
    首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
    定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
    不定宽度：利用css3新增属性transform: translateX(-50%);

    方案三：使用flexbox布局实现（宽度定不定都可以）
    使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;




</body>
<script>
    // some 循环    满足一个条件立马终止循环
    let arr = [10, 30, 4];
    let flag = arr.some((value, index, array) => {
        return value < 3
    });
    console.log(flag); // false 返回值是布尔值，只要查找到满足条件的一个元素就立马终止循环


    // every循环   该函数每一项返回true 才返回true 否则返回false
    let arr1 = [1, 2, 3, 4, 5, 6];
    let flag1 = arr.every((value, index, array) => {
        return value > 10;
    });
    console.log(flag1); // false

</script>

</html>